<template>
    <div class="management1">
        <div class="margin-up-down">
            <!-- <fourLevelLinkage
                @changeProvince="changeProvince"
                @changeCity="changeCity"
                @changeArea="changeArea"
                @changeHospital="changeHospital"
                :province="province"
                :city="city"
                :area="area"
                :hospital="hospital"
                :isBack="isBack"
            ></fourLevelLinkage> -->
        </div>
         <div class="margin-up-down">
            <Input
                v-model.trim="memberName"
                placeholder="患者名字"
                style="width: 200px;margin-right:10px;"
                v-if="identity != 5"
                clearable
            />
        </div>
        <div class="margin-up-down" v-if="identity != 5">
            <Button type="primary" icon="ios-search" @click="search" class="btn"></Button>
            <!-- <Button @click="cancel" class="btn">
                <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
            </Button> -->
        </div> 
        <Modal
            v-model="modalStatus"
            :title="modalTitle"
            :closable="false"
            :mask-closable="false"
            :width = '550'
            :footer="null">
                <fourLevelLinkage
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"
                    :province="province"
                    :city="city"
                    :area="area"
                    :hospital="hospital"
                    :isBack="isBack"
                    style="margin-bottom:15px;width:500px"
                ></fourLevelLinkage>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <!-- 支付渠道 -->
                    <FormItem label="支付渠道" prop="paymentChannel">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付渠道"
                            v-model="formValidate.paymentChannel"
                            style='width:180px;'
                            @on-change='paymentChannelChange'
                        >
                            <Option
                                v-for="item in paymentTypeList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- 支付类型 -->
                    <FormItem label="支付类型" prop="paymentType">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付类型"
                            v-model="formValidate.paymentType"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in paymentChannelList"
                                :value="item.code"
                                :key="item.code"
                                :disabled='item.disabled'
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- 支付账号 -->
                    <FormItem label="支付账号" prop="appId" v-show='formValidate.paymentChannel != 3'>
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付账号"
                            v-model="formValidate.appId"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in paymentAccountList"
                                :value="item.appid"
                                :key="item.appid"
                                style='text-align:center;'
                            >{{item.nick}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="支付账号" v-show='formValidate.paymentChannel == 3' prop="appId">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付账号"
                            v-model="formValidate.appId"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in paymentAccountList"
                                :value="item.appid"
                                :key="item.appid"
                                style='text-align:center;'
                            >{{item.nick}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="交易类型" prop="transactionType">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择交易类型"
                            v-model="formValidate.transactionType"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in transactionTypeList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <!-- 显示端 -->
                    <FormItem label="显示端" prop="displayType">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择显示端"
                            v-model="formValidate.displayType"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in displayTypeList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- 商户号 -->
                    <FormItem label="商户号" prop="merchantIdentification" v-show='formValidate.paymentChannel != 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantIdentification" placeholder="请输入商户号" style="width: 300px" />
                    </FormItem>
                    <FormItem label="商户号" v-show='formValidate.paymentChannel == 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantIdentification" placeholder="请输入商户号" style="width: 300px" />
                    </FormItem>
                    <!-- 商户名称 -->
                    <FormItem label="商户名称" prop="merchantName" v-show='formValidate.paymentChannel != 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantName" placeholder="请输入商户名称" style="width: 300px" />
                    </FormItem>
                    <FormItem label="商户名称" v-show='formValidate.paymentChannel == 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantName" placeholder="请输入商户名称" style="width: 300px" />
                    </FormItem>
                    <FormItem label="退款证书" v-show="formValidate.paymentChannel != 3">
                        <!-- <upload
                            v-model="uploadList"
                            :uploadUrl="uploadUrl"
                            :onDelete="onDelete"
                            :beforeUpload="beforeUpload" /> -->
                    </FormItem>
                    <!-- 支付参数 -->
                    <FormItem label="支付参数" prop="parameterConfig" v-show='formValidate.paymentChannel != 3'>
                        <Input v-model="formValidate.parameterConfig" placeholder="请输入支付参数" style="width: 300px" />
                    </FormItem>
                    <FormItem label="支付参数" v-show='formValidate.paymentChannel == 3'>
                        <Input v-model="formValidate.parameterConfig" placeholder="请输入支付参数" style="width: 300px" />
                    </FormItem>
                    <FormItem label="状态" prop="startType">
                        <iSwitch v-model="formValidate.startType" size="large">
                            <span slot="open">启用</span>
                            <span slot="close">禁用</span>
                        </iSwitch>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <div :disabled='disabled' style="textAlign: center">
                        <Button type="primary" @click="handleSubmit('formValidate')" class="footerbtn">
                            <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                        </Button>
                        <Button @click="cancel" class="footerbtn">
                            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 取消
                        </Button>                  
                    </div>
                </div>
        </Modal>
        <Table stripe :columns="columns1" :data="list"></Table>
        <div class="page">
          <Page :total="homeSize" :current='pageNo' show-total show-elevator @on-change="pageChange"/>
      </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
// import upload from "./components/upload";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import cookie from "../../../utils/cookie.js";
export default {
    components: {
        fourLevelLinkage
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack:1,
            // 上传相关
            uploadUrl: '',
            uploadList: [],
            modalTitle:"添加支付方式",
            modalStatus: false,
            val: '',
            memberName:'',
            // 数据
            formValidate: {
                // 支付渠道
                paymentType: "",
                // 支付类型
                paymentChannel: "",
                // 支付账号
                appName: "",
                appId: "",
                // 交易类型
                transactionType: "",
                // 显示端
                displayType: "",
                // 商户号
                merchantIdentification: "",
                merchantName: "",
                // 支付参数
                parameterConfig: "",
                // 状态
                startType: true
            },
            // 验证
            ruleValidate: {
                //支付渠道
                paymentType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付渠道",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付类型
                paymentChannel: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付类型",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付账号
                appId: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付账号",
						// 触发事件
						trigger: "change"
					}
                ],
                // 交易类型
                transactionType: [
                    {
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付方式",
						// 触发事件
						trigger: "change"
					}
                ],
                // 显示端
                displayType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择显示端",
						// 触发事件
						trigger: "change"
					}
                ],
                // 商户号
                merchantIdentification: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户号",
						// 触发事件
						trigger: "change"
					}
                ],
                merchantName: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户名称",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付参数
                parameterConfig: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入支付参数",
						// 触发事件
						trigger: "change"
					}
                ],
                // 状态
                startType: [
					{
						// 是否校验
						required: false,
						// 提示文字
						message: "请选择状态",
						// 触发事件
                        trigger: "change",
                        type:'boolean'
					}
				]
            },
            // 医院id
            hospitalId: '',
            // 医院名称
            name: "",
            // 支付方式列表
            list: [],
            columns1: [
                {
                    title: '排序',
                    key: 'sum',
                    align: 'center',
                    width: 60,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title: '回访结果',
                    key: 'memberFeedback',
                    align: 'center',
                    // width: 180,
                },
                {
                    title: "回访年龄",
                    align: "center",
                    key: "age",
                    width: 150
                },
                {
                    title: "患者姓名",
                    align: "center",
                    key:"memberName",
                    // width: 150,
                },
                {
                    title: "反馈时间",
                    align: "center",
                    // width: 150,
                    key:"feedbackTime",
                },
            ],
            // 支付渠道列表
            paymentTypeList: [],
            // 支付类型列表
            paymentChannelList: [],
            // 支付账号列表
            paymentAccountList: [],
            // 交易类型列表
            transactionTypeList: [],
            // 显示端列表
            displayTypeList: [],
            // 就诊卡表单
            cart : {
                paymentType: [ { required: true, message: "请选择支付类型", trigger : "change"} ],
                paymentChannel: [ { required: true, message: "请选择支付渠道", trigger: "change"} ],
                displayType: [ {required: true, message: "请选择显示端", trigger: "change"} ],
                transactionType: [ { required: true, message: "请选择交易类型", trigger: "change" } ],
            },
            // 全部表单
            stop : {
                //支付类型
                paymentType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付类型",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付渠道
                paymentChannel: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付渠道",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付账号
                appId: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付账号",
						// 触发事件
						trigger: "change"
					}
                ],
                // 交易类型
                transactionType:[
                    {
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付方式",
						// 触发事件
						trigger: "change"
					}
                ],
                // 显示端
                displayType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择显示端",
						// 触发事件
						trigger: "change"
					}
                ],
                // 商户号
                merchantIdentification: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户号",
						// 触发事件
						trigger: "blur"
					}
                ],
                merchantName: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户名称",
						// 触发事件
						trigger: "blur"
					}
                ],
                // 支付参数
                parameterConfig: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入支付参数",
						// 触发事件
						trigger: "blur"
					}
                ],
                // 状态
                startType: [
					{
						// 是否校验
						required: false,
						// 提示文字
						message: "请选择状态",
						// 触发事件
                        trigger: "change",
                        type:'boolean'
					}
				]
            },
            disabled: false,
            homeSize: 10,
            pageSize: 10,
            pageNo:1,
            identity: ''
        };
    },
    created() {
        this.identity = cookie.getCookie("idtt");
        this.province = this.$route.query.provinceCode
            ? parseInt(this.$route.query.provinceCode)
            : null;
        this.city = this.$route.query.cityCode
            ? parseInt(this.$route.query.cityCode)
            : null;
        this.area = this.$route.query.areaCode
            ? parseInt(this.$route.query.areaCode)
            : null;
        this.hospital = this.$route.query.hospitalId
            ? parseInt(this.$route.query.hospitalId)
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/systemManagement/index",
                title: "帐号权限配置"
            },
            {
                path: "/index/maintain/payment/index",
                title: "支付管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
         // 加载医院账号
        this.loadingData()
    },
    mounted () {
        // 加载医院列表数据
        this.loadingHospitalId(1);
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        onDelete () {
            if (this.formValidate.id) {
                this.$axios.post(api.deleteCert,{id: this.formValidate.id}).then(res => {
                    if(Boolean(res.data.code)) {
                        this.$Message.success("删除成功")
                        this.clearUploadList();
                    } else {
                        this.$Message.error("修改失败")
                    }
                });
            } else {
                this.uploadList = [];
            }
        },
        clearUploadList() {
            this['uploadList'] = [];
        },
        beforeUpload() {
            if (this.formValidate.merchantIdentification) {
                return true;
            } else {
                this.$Message.error('请先填写商户号');
                return false;
            }
            if (this.formValidate.merchantName) {
                return true;
            } else {
                this.$Message.error('请先填写商户名称');
                return false;
            }
        },
        // 返回
        back(){
            let pageNo = this.$route.query
            this.functionJS.queryNavgationTo(
                this,
                "/index/maintain/payment/index",
                pageNo
            );
        },
        // 
        loadingData () {
            // 获取支付账号
            this.$axios.post(api.WxApp, {
                hospitalId:this.hospitalId
            }).then(res => {
                if(res.data.message) {
                    let ret = res.data.object;
                    this.paymentAccountList = ret
                } else {
                    this.$Message.error("加载医院关联公众号失败,请重试")
                }
            })
            // 获取支付类型,显示端,医院账号,交类型
            this.$axios.post(api.paymentMap,{               
            }).then(res => {
                if(res.data.success) {
                    let ret = res.data.object;
                    this.displayTypeList = ret.displayEnum || []
                    this.paymentTypeList = ret.paymentEnum || []
                    this.transactionTypeList = ret.transaction || []
                    if(this.paymentTypeList != []){
                        this.paymentTypeList.forEach(item => {
                            item.disabled = false
                        })
                    }                   
                    this.onListLoading()
                } else {
                    this.$Message.error("加载支付类型与显示端失败,请重试")
                }
            })
        },
        // 禁用已选择的支付渠道
        onListLoading() {
            if(this.paymentChannelList != []){
                    this.paymentChannelList.forEach(item => {
                    item.disabled = false
                })
            }       
            this.list.forEach(item => {
                this.paymentChannelList.forEach(s => {
                    if (Number(item.paymentChannel) == Number(s.code)) {
                        s.disabled = true
                    }
                })
            })
        },
        search() {
            // this.list.forEach((item,index) =>{
            //     if(this.val == item.hospitalName){
            //         this.hospital = item.hospitalId
            //     }
            // })
            this.loadingHospitalId(1, this.memberName);
        },
        // 加载医院支付方式列表
        loadingHospitalId (pageNo, memberName) {
            this.pageNo = pageNo;
            let params = {
                pageNo: pageNo,
                pageSize: 10
            };
            // if (Boolean(val)) {
            //     params.hospitalName = val.trim();
            // }
            params.memberName = memberName;
            // params.cityCode = this.city ? this.city : null;
            // params.areaCode = this.area ? this.area : null;
            // params.hospitalId = this.hospital ? this.hospital : null;
            // params.isBack = 2
            this.$axios.post(api.returnVisitSelect, params).then(res => {
                if(res.data.success) {
                    let ret = res.data.object;
                    this.homeSize = res.data.object.total;
                    if(ret.records){
                        ret.records.forEach((item,index) =>{
                            // item.sum = this.addZeros(index)
                            // if(val == item.hospitalName){
                            //     this.hospitalId = item.hospitalId
                            // }
                        })
                        this.list = ret.records || []
                    } else {
                        this.list = []
                    }                   
                } else {
                    this.$Message.error("加载医院支付方式列表失败,请重试")
                }
            })
        },
        // 新增支付类型
        saveChange (params) {
            console.log(params)
            this.$axios.post(api.insertHospitalPayment, params).then(res => {
                if(Boolean(res.data.code)) {
                    let ret = res.data.object
                    this.$Message.success(ret.success)
                    this.$refs['formValidate'].resetFields();
                    this.ruleValidate = this.stop;
                    setTimeout(() => {
                        this.disabled = false             
                    }, 1000);
                    this.modalStatus = false;
                    this.loadingHospitalId(1)
                } else {
                    let message = res.data.object.same || "添加失败,请重试"
                    this.$Message.error(message)
                }
            })
        },
        // 修改支付类型
        updateList (params) {
            params.id = this.formValidate.id;
            this.$axios.post(api.updateHospitalPayment, params).then(res => {
                if(Boolean(res.data.code)) {
                    this.$Message.success("修改成功");
                    this.$refs['formValidate'].resetFields();
                    this.ruleValidate = this.stop;
                    setTimeout(() => {
                        this.disabled = false             
                    }, 1000);
                    this.modalStatus = false;
                    this.loadingHospitalId(1)
                } else {
                    this.$Message.error("修改失败")
                }
            })
        },
        //分页
        pageChange(index) {
            this.loadingHospitalId(index, this.val);
        },
    },
    watch: {
        'formValidate.merchantIdentification'(n) {
            let url = api.uploadCert;
            this.uploadUrl = url.replace('{id}', n);
        },
        modalStatus(n) {
          if (!n) {
              this.clearUploadList();
          }
        }
    }
};
</script>
<style lang="less" scoped>
.management1 {
    width: calc(100% );
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        width: 51px;
        height: 32px;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.footerbtn {
    width: 75px;
    height: 35px;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
